<template>
  <div class='subject-container'>
     <el-card>
          <el-row type="flex" justify="space-between">
            <el-col :span="18" :md="18">
             <el-form size="small" >
              <el-row :gutter="10">
                <el-col  :md="12" :lg="7">
                <el-form-item label-width="80px" label="学科名称" style="width:270px">
                    <el-input  v-model="subjectName"></el-input>
                </el-form-item>
              </el-col>
              <el-col  :md="12" :lg="5" >
                <el-form-item >
                    <el-row >
                      <el-button size="small" @click="clear">清除</el-button>
                      <el-button size="small" type="primary" @click="hSearch">搜索</el-button>
                    </el-row>
                </el-form-item>
              </el-col>
              </el-row>
            </el-form>
            </el-col>

            <el-col :span="6" :md="6">
              <el-row type="flex" justify="end">
                  <el-button type="success" size="small" @click="hAdd"><i class="el-icon-edit" /> 新增学科</el-button>
              </el-row>
            </el-col>
          </el-row>
           <el-alert
            :title="alertText"
            type="info"
            class="alert"
            :closable="false"
            show-icon
            ></el-alert>
          <el-table
           :header-cell-style="{background:'#fafafa'}"
          :data="subjectList"
          style="width: 100%"
          >
          <el-table-column
          type="index"
          label="序号"
          width="50">
        </el-table-column>
         <el-table-column
          prop="subjectName"
          label="学科名称"
          width="140">
        </el-table-column>
         <el-table-column
          prop="username"
          label="创建者"
          width="140">
        </el-table-column>
         <el-table-column
          label="创建日期"
          width="155">
          <template #default="{row}">
            {{formatDate(row.addDate)}}
          </template>
        </el-table-column>
         <el-table-column
          prop="isFrontDisplay"
          label="前台是否显示"
          width="140">
           <template #default="{row}">
            {{row.isFrontDisplay?'是':'否'}}
          </template>
        </el-table-column>
         <el-table-column
          prop="twoLevelDirectory"
          label="二级目录"
          width="140">
        </el-table-column>
         <el-table-column
          prop="tags"
          label="标签"
          width="135">
        </el-table-column>
         <el-table-column
          prop="totals"
          label="题目数量"
          width="140">
        </el-table-column>
         <el-table-column
          label="操作"
         >
          <template #default="{row}">
            <el-button type="text" @click="$router.push(`/subjects/directorys?id=${row.id}&name=${row.subjectName}`)">学科分类</el-button>
            <el-button type="text" @click="$router.push(`/subjects/tags?id=${row.id}&name=${row.subjectName}`)">学科标签</el-button>
            <el-button type="text" @click="hEdit(row)">修改</el-button>
            <el-button type="text" @click="hDel(row.id)">删除</el-button>
          </template>
        </el-table-column>
          </el-table>
        <el-row type="flex" justify="end" class="pagination">
          <el-pagination
            @size-change="handleSizeChange"
            background
            @current-change="handleCurrentChange"
            :current-page="q.page"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="q.pagesize"
            layout="prev,pager,next,sizes,jumper"
            :total="total">
          </el-pagination>
      </el-row>
     </el-card>
     <el-dialog
     @closed="hClose"
     :visible.sync="showDialog"
     width="400px"
     :title="isEdit?'编辑学科':'新增学科'"
     :close-on-click-modal="false"
     >
      <el-form label-width="80px" size="small" :model="subjectForm" :rules="rules" ref="subjectForm">
        <el-form-item label="学科名称" prop="subjectName">
           <el-input v-model="subjectForm.subjectName" placeholder="请输入学科名称"></el-input>
        </el-form-item>
        <el-form-item label="是否显示">
          <el-switch
            v-model="subjectForm.isFrontDisplay"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </el-form-item>
      </el-form>
       <div slot="footer" class="dialog-footer">
      <div class="close">
      <el-button @click="showDialog=false">取消</el-button>
      <el-button type="primary" @click="hSubmit">确认</el-button>
      </div>
    </div>
     </el-dialog>
  </div>
</template>

<script>
import moment from 'moment'
import * as subjects from '@/api/hmmm/subjects.js'
export default {
  data () {
    return {
      subjectName: '',
      alertText: '共12条数据',
      subjectList: [],
      q: {
        page: 1,
        pagesiez: 10
      },
      total: 10,
      showDialog: false,
      subjectForm: {
        subjectName: '',
        isFrontDisplay: true
      },
      isEdit: false,
      rules: {
        subjectName: [{ required: true, message: '请输入学科名称', trigger: 'blur' }]
      }
    }
  },
  created () {
    this.loadSubjectList()
  },
  methods: {
    hAdd () {
      this.isEdit = false
      this.showDialog = true
    },
    async doAdd () {
      try {
        if (this.subjectForm.isFrontDisplay) {
          this.subjectForm.isFrontDisplay = 1
        } else {
          this.subjectForm.isFrontDisplay = 0
        }
        const res = await subjects.add(this.subjectForm)
        if (res.status === 200) {
          this.loadSubjectList()
          this.showDialog = false
          this.$message.success('添加成功')
        }
      } catch (error) {
        console.log(error)
      }
    },
    hEdit (row) {
      this.isEdit = true
      this.showDialog = true
      this.subjectForm = { ...row }
      if (this.subjectForm.isFrontDisplay) {
        this.subjectForm.isFrontDisplay = true
      } else {
        this.subjectForm.isFrontDisplay = false
      }
    },
    async doEdit () {
      try {
        const res = await subjects.update(this.subjectForm)
        console.log(res)
        if (res.status === 200) {
          this.loadSubjectList()
          this.showDialog = false
          this.$message.success('修改成功')
        }
      } catch (error) {
        console.log(error)
      }
    },
    hSubmit () {
      this.$refs.subjectForm.validate(valid => {
        if (!valid) return
        this.isEdit ? this.doEdit() : this.doAdd()
      })
    },
    hDel (id) {
      this.$confirm('此操作将永久删除该学科, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await subjects.remove({ id: id })
        this.loadSubjectList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    hClose () {
      this.$refs.subjectForm.resetFields()
      this.subjectForm = {
        subjectName: '',
        isFrontDisplay: true
      }
    },
    clear () {
      this.subjectName = ''
      delete this.q.subjectName
    },
    async hSearch () {
      if (this.subjectName) {
        this.q.subjectName = this.subjectName
      } else {
        delete this.q.subjectName
      }
      this.loadSubjectList()
    },
    async loadSubjectList () {
      try {
        const res = await subjects.list(this.q)
        // console.log(res, 'subject')
        if (res.status !== 200) return this.$message.error('获取失败')
        this.subjectList = res.data.items
        this.total = res.data.counts
        this.alertText = `共${this.total}条数据`
        console.log(res, 'subject')
      } catch (error) {
        console.log(error)
      }
    },
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.q.pagesize = val
      this.q.page = 1
      this.loadSubjectList()
    },
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.q.page = val
      this.loadSubjectList()
    },
    formatDate (date) {
      return moment(date).format('YYYY-MM-DD HH:mm:ss')
    }
  }
}
</script>

<style scoped lang='less'>
.subject-container{
   padding: 0 10px;
    margin: 10px 0;

    .alert {
  margin: 10px 0px;
  }
  .pagination{
    margin: 20px 0;
  }
  .el-form-item--medium {
    margin-bottom: 18px;
}
  .close{
    display: flex;
    justify-content: flex-end;
  }
}
</style>
